<template>
	<view class="bg-white">
		<view class="flex justify-start text-xl text-bold text-black margin-top-lg">
			{{typeName}}评论
		</view>
		<view v-if="commentList.length>0" v-for="item in comments" :key="item.commentId" class="margin-top">
			<view class="">
				<view class="flex flex-direction">
					<view class="flex justify-between align-center">
						<view class="flex align-center">
							<view class="cu-avatar sm round" :style="'background-image:url('+ item.userAvatar +')'"></view>
							<view class="comment-username margin-left-xs">{{item.userName}}</view>
						</view>
						<view style="width: 136rpx; height: 32rpx; font-size: 24rpx; font-family: PingFangSC-Regular, PingFang SC; font-weight: 400; color: #999999; line-height: 32rpx;">
							{{item.createTime}}
						</view>
					</view>
					<view class="margin-top-sm comment-content">
						{{item.content}}
					</view>
					<button @click="publish(item)" class="cu-btn self-end  margin-top-sm margin-right" style="width: 56px; height: 24px; background: #F2F2F7; border-radius: 4px;font-size: 12px;">回复</button>
				</view>
				<view v-if="item.subComments.length>0" class="flex flex-direction padding-lr-sm margin-top-sm padding-bottom" style="background: #F2F2F7">
					<view v-for="subItem in item.subComments" :key="subItem.commentId" class="margin-top-sm" style="position: relative;">
						<text v-if="subItem.targetCommentId == constantID" class="comment-username">{{subItem.userName}}</text>
						<text v-if="subItem.targetCommentId != constantID" class="comment-username">
							<text>{{subItem.userName}}</text>
							<text style="color: #999999;">回复</text>
							<text>{{subItem.targetUserName}}</text>
						</text>
						<text class="comment-content">:&nbsp;&nbsp;{{subItem.content}}</text>
						<text @click="publish(subItem)" style="position: absolute; color: #007AFF; right: 0; bottom: 6rpx;">回复</text>
					</view>
					<view v-if="commentsBackup[item.commentId] && commentsBackup[item.commentId].length>3"  @click="unfold(item)" class="self-start margin-top" style="color: #007AFF;">
						<text v-if="!item.isUnfold && item.subComments.length <= 3">
							查看全部回复
						</text>
						<text v-if="item.isUnfold && item.subComments.length>3">
							收起评论
						</text>
					</view>
				</view>
			</view>
		</view>
		
		<view v-if="commentList.length<=0" class="flex justify-center" style="margin: 20rpx 0;padding: 0 32rpx;font-size: 30rpx;">
			暂无评论
		</view>
	</view>
</template>

<script>
	/* 
		评论有3种级别，
		第 1级：文章下的顶级评论，特征：parentCommentId、targetCommentId都等于constantID，
		第 2级：顶级评论下的、回复顶级评论的评论，parentCommentId为顶级评论，targetCommentId等于constantID，
		第 3级：顶级评论下的、回复第2级评论的评论，parentCommentId为顶级评论，targetCommentId为回复的第2级评论，
		采用特殊值 "0000000000000000000"作为constantID，来区分评论的级别
	*/
	import Vue from "vue"
	export default {
		data() {
			return {
				constantID: "0000000000000000000",
				comments: {},	//对象类型，key：顶级评论的commentId；value：该顶级评论的对象，该对象的subComments数组，存放了部分/全部的子评论(收起评论/展开评论)
				commentsBackup: {},	//对象类型，key：顶级评论的commentId；value：该顶级评论的子评论数组，该 数组 存放了所有的子评论，作为评论栏展开、收缩时复制的对象
			};
		},
		props: {
			typeName: {
				type: String,
				default: '课程'
			},
			//从后端获取的没有做区分的所有评论
			commentList: {
				type: Array,
				default: function () {
					return []
				}
			}
		},
		mounted() {
			//将后端传来的没有做区分的所有评论，处理成 顶级评论及其子评论的结构(this.comments存放)
			this.loadData();
			//处理后，顶级评论拥有其所有的子评论，对应于回复栏的展开状态
			//而默认下，评论栏应该是收缩状态的，所以下面手动对所有顶级评论切换其评论栏状态
			for(let key in this.comments){
				this.changeSubCommentList(this.comments[key]);
			}
			this.$forceUpdate()	
		},
		methods: {
			publish(item) {
				this.$emit('publish', item);
			},
			loadData() {
				this.commentList.forEach(item => {
					if(item.parentCommentId == this.constantID) {	//顶级评论
						item["subComments"] = new Array();
						item["isUnfold"] = false;
						this.comments[item.commentId] = item;
						this.commentsBackup[item.commentId] = new Array();
					}else {
						this.comments[item.parentCommentId].subComments.push(item);
						this.commentsBackup[item.parentCommentId].push(item);
					}
				})
			},
			unfold(item) {
				item.isUnfold = !item.isUnfold;
				this.changeSubCommentList(item);
				this.$forceUpdate()
			},
			changeSubCommentList(item) {
				if(item.isUnfold) {
					item.subComments = this.commentsBackup[item.commentId].slice();
				}else {
					let last = Math.min(item.subComments.length, 3) ;
					item.subComments = this.commentsBackup[item.commentId].slice(0, last);
				}
			}
		}
	}
</script>

<style>
	.comment-username {
		font-size: 14px;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #1C1C1E;
		line-height: 24px;
	}
	.comment-content {
		font-size: 14px;
		font-family: PingFangSC-Semibold, PingFang SC;
		color: #1C1C1E;
		line-height: 24px;
	}
</style>
